<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control :current="current" :values="items" :style-type="styleType"
                             :active-color="activeColor" @clickItem="onClickItem"/>
    </view>
    <view>
        <uni-grid v-if="current === 0" :column="2" >
          <uni-grid-item v-for="pro in getGoodList" :key="pro.proId">
            <view @click="goToDetail(pro.proId)">
              <view>
                <image :src="pro.image" style="height: 140px;"/>
              </view>
              <view>
                <text class="title"  v-if="pro.proName.length <=11">{{ pro.proName }}</text>
                <text class="title" v-else>{{ pro.proName.substring(0, 11) }}...</text>
              </view>
              <view class="price">￥{{ pro.proPrice.toFixed(2) }}</view>
            </view>
          </uni-grid-item>
        </uni-grid>
    </view>


    <view>
      <uni-grid v-if="current === 1" :column="2">
        <button class="flag" @click="sortPrices">升序▲</button>
        <button class="flag" @click="reversePrices">降序▼</button>
        <uni-grid-item v-for="item in getGoodList" :key="item.proId" >
          <view @click="goToDetail(item.proId)">
            <view>
              <image :src="item.image" style="height: 140px;"/>
            </view>
            <view>
              <text class="title"  v-if="item.proName.length <=11">{{ item.proName }}</text>
              <text class="title" v-else>{{ item.proName.substring(0, 11) }}...</text>
            </view>
            <view class="price">￥{{ item.proPrice.toFixed(2) }}</view>
          </view>
        </uni-grid-item>
    </uni-grid>
    </view>
    <text class="foot">俺也是有底线的~</text>
    <br/>
    <br/>
    <br/>
    <br/>
  </view>
</template>

<script>
import UploadImage from "../../../../uni_modules/uni-file-picker/components/uni-file-picker/upload-image";
import UniDataPickerView
  from "../../../../uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview";
import UniBreadcrumb from "../../../../uni_modules/uni-breadcrumb/components/uni-breadcrumb/uni-breadcrumb";


export default {
  name: "home",
  components: {UniBreadcrumb, UniDataPickerView, UploadImage},
  data() {
    return {
      items: ['推荐', '价格'],
      styles: [],
      colors: [],
      shopId:0,
      current: 0,
      colorIndex: 0,
      activeColor: '#007aff',
      styleType: 'text',
      getGoodList:[],
      pages:{
        pageSize:100000000
      },
      title:""
    }
  },
  methods: {
    /**跳转商品详情页*/
    goToDetail(proId) {
      uni.navigateTo({ url: '/pages/product/details/index?proId='+proId});
      // 在跳转后的详情页中可以通过获取 proId 来获取对应商品的数据
    },
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex
      }
    },
    //升序
    sortPrices() {
        this.getGoodList.sort((a, b) => a.proPrice - b.proPrice);
    },
    //降序
    reversePrices(){
      this.getGoodList.sort((a, b) => a.proPrice - b.proPrice).reverse()
    },
  },
}
</script>

<style lang="scss">
.example-body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  padding: 0;
}
.flag{
  width: 50%;
  display: inline-block;
}
.uni-common-mt {
  margin-top: 30px;
}

.uni-padding-wrap {
  // width: 750rpx;
  position: relative;
  font-size: .75rem;
}

.content-text {
  font-size: 14px;
  color: #666;
}

.color-tag {
  width: 25px;
  height: 25px;
}

.uni-list {
  flex: 1;
}

.uni-list-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex: 1;
  flex-direction: row;
  background-color: #FFFFFF;
}
.title {
  font-size: 16px;
  line-height: 24px;
  /* 其他样式设置 */
}

.uni-list-item__container {
  padding: 12px 15px;
  width: 100%;
  flex: 1;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #eee;
}
.foot{
  font-size: 18px;
  padding-left: 120px;
}
.price{
  font-size: 22px;
  color: red;
}
.uni-list-item__content-title {
  font-size: 14px;
}
</style>